```jsx
import * as slider from "@zag-js/slider"
import { normalizeProps, useMachine } from "@zag-js/solid"
import { createMemo, For, createUniqueId } from "solid-js"

export function Slider() {
  const service = useMachine(slider.machine, {
    id: createUniqueId(),
    defaultValue: [0],
  })

  const api = createMemo(() => slider.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      <div>
        <label {...api().getLabelProps()}>Slider Label</label>
        <output {...api().getValueTextProps()}>{api().value.at(0)}</output>
      </div>
      <div {...api().getControlProps()}>
        <div {...api().getTrackProps()}>
          <div {...api().getRangeProps()} />
        </div>
        <For each={api().value}>
          {(_, index) => (
            <div {...api().getThumbProps({ index: index() })}>
              <input {...api().getHiddenInputProps({ index: index() })} />
            </div>
          )}
        </For>
      </div>
    </div>
  )
}
```
